<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="fixed-table-toolbar">
        <h3 class="pull-left">用户信息</h3>
        <div class="columns-right pull-right" style="margin-top:10px;margin-bottom:10px;">
            <button class="btn btn-default btn-search" type="button" name="commonSearch" title="普通搜索">
            <i class="glyphicon glyphicon-search"></i>
        </button>
        </div>
        <div class="pull-right search"><input class="form-control" type="text" name="search" placeholder="搜索用户昵称/手机号"></div>
    </div>
    <input type="hidden" name="row[user_id]" value="0">
    <div class="fixed-table-body">
        <table id="" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="1" data-operate-del="1" width="100%">
            <thead>
            <tr>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">用户昵称</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">会员等级</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">用户手机</div>
                    <div class="fht-cell"></div>
                </th>
            </tr>
            </thead>
            <tbody data-listidx="0">
            <tr data-index="0" class="selected">
                <td style="text-align: center; vertical-align: middle; "><span class="nickname"></span></td>
                <td style="text-align: center; vertical-align: middle; "><span class="vip"></span></td>
                <td style="text-align: center; vertical-align: middle; "><span class="phone"></span></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="fixed-table-toolbar">
        <h3 class="pull-left">服务信息</h3>
        <div class="btn btn-success columns-right pull-right" style="margin-top:10px;margin-bottom:10px;" onclick="add()">增加</div>
    </div>
    <div class="fixed-table-body">
        <table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="1" data-operate-del="1" width="100%">
            <thead>
            <tr>
                <th style="text-align: center; vertical-align: middle; " >
                    <div class="th-inner ">分类</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">服务名字</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">设计师/造型师</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">数量</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">单价</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">总价</div>
                    <div class="fht-cell"></div>
                </th>
                <th style="text-align: center; vertical-align: middle; ">
                    <div class="th-inner ">操作</div>
                    <div class="fht-cell"></div>
                </th>
            </tr>
            </thead>
            <tbody data-listidx="0">

<!--            <tr data-index="0" class="selected">-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--                <td style="text-align: center; vertical-align: middle; "></td>-->
<!--            </tr>-->

            </tbody>
        </table>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed">{:__('提交')}</button>
        </div>
    </div>
</form>
<script>

    function deletes(id) {
        var thisNode=document.getElementById(id);
        thisNode.parentElement.removeChild(thisNode);
    }

    var count=0
    function add() {
        count ++
        var tmp = document.createElement('tr');
        tmp.setAttribute('id',count);
        tmp.innerHTML = ` <tr id="${count}" data-index="0" class="selected">
                <td width="18%" style="text-align: center; vertical-align: middle; ">
                    <select class="form-control " name="row[goods][${count}][category_id]">
                        <option value="0">请选择分类...</option>
                        {foreach name="categories" item="vo"}
                        <option value="{$vo->id}">{$vo->title}</option>
                        {/foreach}
                    </select>
                </td>
                <td width="18%" style="text-align: center; vertical-align: middle; ">
                    <select class="form-control" name="row[goods][${count}][service_id]" id="select-service-${count}" onchange="service(${count})">
                        <option value="0">请选择服务...</option>
                        {foreach name="services" item="vo"}
                        <option value="{$vo->id}" data-price="{$vo->service_price}" >{$vo->service_name}</option>
                        {/foreach}
                    </select>
                </td>
                <td width="23%" style="text-align: center; vertical-align: middle; ">
                    <select class="form-control" name="row[goods][${count}][design_id]">
                        <option value="0">请选择设计师、造型师...</option>
                        {foreach name="designs" item="vo"}
                        <option value="{$vo->id}">{$vo->nickname}</option>
                        {/foreach}
                    </select>
                </td>
                <td width="10%" style="text-align: center; vertical-align: middle; ">
                    <input type="number" class="form-control" name="row[goods][${count}][num]" onchange="num(${count})" min="1" value="1" placeholder="">
                </td>
                <td width="15%" style="text-align: center; vertical-align: middle; ">
                    <input type="number" class="form-control" name="row[goods][${count}][price]" onchange="price(${count})" min="0" value="" placeholder="">
                </td>
                <td width="15%" style="text-align: center; vertical-align: middle; ">
                    <input type="text" class="form-control" name="row[goods][${count}][total_money]" min="0" value="" placeholder="" readonly>
                </td>
                <td style="text-align: center; vertical-align: middle; ">
                    <span class="btn btn-danger" class="form-control" onclick="deletes(${count})">删除</span>
                </td>
            </tr>`;
        document.getElementById('table').appendChild(tmp);
    }

    //服务价格
    function service(index) {
        var service_price = $("#select-service-"+index+" option:selected").data('price')
        var line_price = $("#select-service-"+index+" option:selected").data('line_price')
        var num = $("input[name='row[goods]["+index+"][num]']").val()
        $("input[name='row[goods]["+index+"][price]']").val(service_price)
        $("input[name='row[goods]["+index+"][line_price]']").val(line_price)
        var price = $("input[name='row[goods]["+index+"][price]']").val()
        $("input[name='row[goods]["+index+"][total_money]']").val(num * price)
    }

    //数量
    function num(index) {
        var num = $("input[name='row[goods]["+index+"][num]']").val();
        var price = $("input[name='row[goods]["+index+"][price]']").val();
        $("input[name='row[goods]["+index+"][total_money]']").val(num * price);
    }

    //单价
    function price(index) {
        var num = $("input[name='row[goods]["+index+"][num]']").val();
        var price = $("input[name='row[goods]["+index+"][price]']").val();
        $("input[name='row[goods]["+index+"][total_money]']").val(num * price);
    }



</script>
<style>
    #add-form{
        margin-right: 40px;
        background: white;
        padding: 20px;
    }
    .dis-fex{
        display: flex;
    }
    .flex-x-space{
        justify-content:space-between;
    }
    .name{
        font-size: 24px;
        font-weight:bold;
    }
    .pt-50{
        padding-bottom: 50px;
    }
    .inputbox>div{
        padding-bottom: 20px;
    }
    input{
        text-align: center;
    }
    .fw-bold{
        font-weight: bold;
    }
    table{
        text-align: center;
    }
    th{
        text-align: center !important;
    }
    .tablebox{
        margin-top: 20px;
    }
    .fs-0{
        font-size: 0;
    }
    .fs-12{
        font-size:12px;
    }
    select{
        width: 60%;
    }
    td{
        padding-bottom:20px;
    }
    .add{
        float: right;
        margin-right: 5px;
        margin-bottom: 40px;
    }
</style>
